<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { baseURL } from '@/utils/request'
import { WarnTriangleFilled } from '@element-plus/icons-vue'

const userStore = useUserStore()
const userform = ref({})
const BaseAvatar = ref([
  {
    url: 'https://img1.baidu.com/it/u=3488078046,3540525588&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
  },
  {
    url: 'https://img2.baidu.com/it/u=3215625740,2530177695&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img1.baidu.com/it/u=3018293377,3003471282&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img1.baidu.com/it/u=904317239,3442708781&fm=253&fmt=auto&app=120&f=JPEG?w=511&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=3771127737,3930953193&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img2.baidu.com/it/u=135208876,3661679439&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=2921472626,418341964&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=535380572,3652526819&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img1.baidu.com/it/u=2148002681,1482662620&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=2670519541,1535491845&fm=253&fmt=auto&app=120&f=JPEG?w=502&h=500'
  }
])

// 使用深拷贝
userform.value = JSON.parse(JSON.stringify(userStore.user))

console.log(userStore.user.image)
console.log(userform.value.image)
const handleAvatarSuccess = (res) => {
  console.log(res)
  console.log(userStore.user.image)
  userform.value.image = res.data
  console.log(userform.value.image)
}
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG) {
    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
    return false
  }
  return true
}
const userSubmit = async () => {
  await ElMessageBox.confirm(`你确定要修改头像吗?`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    icon: WarnTriangleFilled,
    draggable: true
  })
  await userStore.updateUseInfo(userform.value)
}
</script>
<template>
  <div class="user-info">
    <div class="user-info-title">选择头像</div>
    <el-form class="user-info-form" ref="form" :model="userform" label-width="100px">
      <el-form-item label="头像">
        <el-upload
          class="upload-image"
          :show-file-list="false"
          :action="baseURL + '/files/upload'"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="userform.image && userform.image.length < 20 && userform.image.length > 0"
            :src="baseURL + '/files/' + userform.image"
            class="see-image"
          />
          <img
            v-else-if="userform.image && userform.image.length >= 20"
            :src="userform.image"
            alt=""
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          <el-button class="el-button--primary" size="medium" type="primary">点击上传</el-button>
        </el-upload>
        <div class="right-image">
          <ul>
            <li v-for="(item, index) in BaseAvatar" :key="index" class="avatar-active">
              <img :src="item.url" @click="userform.image = item.url" alt="" />
            </li>
            <div class="more-avatar">更多...</div>
          </ul>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="userSubmit()">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.user-info {
  width: 100%;
  height: 100%;
  background-color: #fbfbea;
  border-radius: 10px;
  padding: 20px;

  .user-info-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .user-info-form {
    .right-image {
      flex: 1;
      margin-left: 30px;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        position: relative;
        .more-avatar {
          right: 0;
          bottom: 6px;

          position: absolute;
          cursor: pointer;
          &:hover {
            color: #ff9a9e;
          }
        }
        li {
          width: 80px;
          height: 80px;
          margin-right: 10px;
          border: 1px solid #fbfbea;
          border-radius: 6px;
          margin-bottom: 10px;
          cursor: pointer;
          transition: all 0.4s ease-in-out;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
          }
          &:hover {
            border: 1px solid #ff9a9e;
            border-radius: 6px;
            transform: scale(1.4);
          }
        }
      }
    }
    .el-input {
      width: 300px;
    }

    .el-select {
      width: 300px;
    }

    .upload-image {
      width: 150px;
      height: 200px;
      border: 1px dashed #ccc;
      border-radius: 6px;

      img {
        width: 100%;
        object-fit: cover;
        border-radius: 6px;
        display: block;
        transition: all 0.3s ease-in-out;
      }

      img:hover {
        transform: scale(1.1);
      }

      .el-button--primary {
        display: block;
        font-size: 16px;
        margin: 10px auto;
      }
    }

    .see-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
